<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<div class="layui-form layuimini-form">
    <input type="hidden" id="id" name="id">
    <input type="hidden" id="state" name="state">
    <div class="layui-form-item">
        <label class="layui-form-label required">电影名</label>
        <div class="layui-input-block">
            <input type="text" id="name" lay-verify="required" lay-reqtext="电影名不能为空" placeholder="请输入电影名" value="" onblur="check_movie()" class="layui-input">
            <span style="color: red" id="error"></span>
        </div>

    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">导演</label>
        <div class="layui-input-block">
            <input type="text" id="director" lay-verify="required" lay-reqtext="导演名不能为空" placeholder="请输入导演名" value="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">演员</label>
        <div class="layui-input-block">
            <input type="text" id="actor" lay-verify="required" lay-reqtext="演员名不能为空" placeholder="请输入演员名" value="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">电影类型</label>
        <div class="layui-input-block">
            <input type="checkbox" name="adventure" value="1" title="冒险"><div class="layui-unselect layui-form-checkbox"><span>冒险</span><i class="layui-icon layui-icon-ok"></i></div>
            <input type="checkbox" name="thriller" value="2" title="惊悚"><div class="layui-unselect layui-form-checkbox"><span>惊悚</span><i class="layui-icon layui-icon-ok"></i></div>
            <input type="checkbox" name="action" value="3" title="动作"><div class="layui-unselect layui-form-checkbox"><span>动作</span><i class="layui-icon layui-icon-ok"></i></div>
            <input type="checkbox" name="comedy" value="4" title="喜剧"><div class="layui-unselect layui-form-checkbox"><span>喜剧</span><i class="layui-icon layui-icon-ok"></i></div>
            <input type="checkbox" name="love" value="5" title="爱情"><div class="layui-unselect layui-form-checkbox"><span>爱情</span><i class="layui-icon layui-icon-ok"></i></div>
            <input type="checkbox" name="fiction" value="6" title="科幻"><div class="layui-unselect layui-form-checkbox"><span>科幻</span><i class="layui-icon layui-icon-ok"></i></div>
            <input type="checkbox" name="chinese" value="7" title="中文"><div class="layui-unselect layui-form-checkbox"><span>中文</span><i class="layui-icon layui-icon-ok"></i></div>
            <input type="checkbox" name="english" value="8" title="英文"><div class="layui-unselect layui-form-checkbox"><span>英文</span><i class="layui-icon layui-icon-ok"></i></div>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">时长</label>
        <div class="layui-input-block">
            <input type="text" id="duration" lay-verify="required" lay-reqtext="电影时长不能为空" placeholder="请输入电影时长" value="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">电影单价</label>
        <div class="layui-input-block">
            <input type="text" id="price" lay-verify="required" lay-reqtext="电影单价不能为空" placeholder="请输入电影单价" value="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">评分</label>
        <div class="layui-input-block">
            <input type="text" id="score" placeholder="请输入评分" value="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">票房</label>
        <div class="layui-input-block">
            <input type="commentnum" id="commentnum" placeholder="请输入票房" value="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">电影海报</label>
        <div class="layui-input-inline">
            <%--图片名--%>
            <input id="fileName" type="text" lay-verify="fileName" name="image" autocomplete="off" class="layui-input" disabled style="width: 180px;" >
            <%--隐藏输入框 用来存放上传后图片路径--%>
            <input id="credential_hide" name="credentialOne" type="hidden" lay-verify="credentialOne" autocomplete="off" class="layui-input">
            <%--隐藏按钮上传--%>
            <button id="upload_img" type="button" hidden></button>
        </div>
        <button class="layui-btn" id="preview_img" type="button" >
            上传图片
        </button>
        <%--折叠面板--%>
        <div class="layui-collapse" lay-accordion="" style="width: 400px;margin-left: 67px;margin-top: 5px">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">展开图片</h2>
                <div class="layui-colla-content" id="colla_img" style="">
                </div>
            </div>
        </div>
    </div>

    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label required">电影描述</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入内容" id="detail" class="layui-textarea"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
        </div>
    </div>
</div>
<script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>

<script>
    //判断电影名是否已存在
    function check_movie(){
        let flag = true;
        $.ajax({
            type:'POST',
            url:'${path}/movies/isExists',
            data:{"name":$("#name").val()},
            async:false,  //默认true是异步，要设置为false同步
            success:function (result){
                console.log(result)
                console.log(result.object)
                if(result.code == "200" ){
                    $("#error").text("");
                }else {
                    console.log($("#id"))
                    if(result.object==$("#id").val()){
                        $("#error").text("");
                    }else {
                        $("#error").text("电影名已存在！请换个吧！");
                        flag = false;
                        return false;
                    }
                }
            }
        });
        if(!flag){
            return false;
        }else {
            return true;
        }
    }

    layui.use(['form'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$;
        //监听提交
        form.on('submit(saveBtn)', function (data) {
            var index = layer.confirm('确认是否修改？', {
                title: '修改电影信息',
                icon:'3'
            }, function (index) {
                if(!check_movie())return false;
                //获取电影的类型值
                let types = [];
                $('input[type=checkbox]:checked').each(function() {
                    types.push($(this).val());
                });
                let send_data = {"id":$("#id").val(),"name":$("#name").val(),"actor":$("#actor").val(),"director":$("#director").val(),
                    "duration":$("#duration").val(),"price":$("#price").val(),"score":$("#score").val(),"state":$("#state").val(),
                    "movieImg":$("#credential_hide").val(),"commentnum":$("#commentnum").val(),"detail":$("#detail").val(),
                    "movieTypes":types
                }
                $.post("${path}/movies/admin/editMovie",send_data,function (result){
                    if(result.code=="200"){
                        layer.msg('修改成功！', {icon:1, time: 2000},function (){
                            parent.location.reload();
                            // 关闭弹出层
                            layer.close(index);
                            let iframeIndex = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(iframeIndex);
                        });
                    }else {
                        layer.msg('修改失败！', {icon:2});
                    }
                });
            });
            return false;
        });
    });

    function child(data){
        layui.use(['form'], function () {
            let form = layui.form,
                $ = layui.$;
            console.log(data);
            // //获取子页面的元素，进行数据渲染
            $("#id").val(data.id);
            $("#name").val(data.name);
            $('#actor').val(data.actor);
            $('#director').val(data.director);
            $('#detail').val(data.detail);
            $('#duration').val(data.duration);
            $('#price').val(data.price);
            $('#score').val(data.score);
            $('#commentnum').val(data.commentnum);
            $('#state').val(data.state);
            let imgSrc = data.movieImg;
            $('#fileName').val(imgSrc.substr(imgSrc.indexOf('-')+1,imgSrc.length));
            $('#credential_hide').val(data.movieImg);
            $('#colla_img').append('<a href="#" onclick="openImg();"><img id="showImg" src="http://localhost:80/movies/' +data.movieImg + '" width="370px"></a>');
            let movieTypes = data.movieTypes.toString();
            let types = []
            types = movieTypes.split(",");
            console.log(types);
            $('input[type=checkbox]').each(function() {
                for (let i = 0; i < types.length; i++) {
                    if($(this).val() == types[i]){
                        $(this).prop("checked",true);
                    }
                }
            });
            form.render();          //表单渲染
        });
    }

    /*查看大图*/
    function openImg() {
        let $ = layui.jquery;
        var idBar = '#showImg';
        var src = $(idBar)[0].src;
        var width = $(idBar).width();
        var height = $(idBar).height();
        var scaleWH = width / height;
        var bigH = 550;
        var bigW = scaleWH * bigH;
        if (bigW > 1000) {
            bigW = 1000;
            bigH = bigW / scaleWH;
        } // 放大预览图片
        parent.layer.open({
            type: 1,
            title: false,
            closeBtn: 1,
            shadeClose: true,
            area: [bigW + 'px', bigH + 'px'], //宽高
            content: '<img width="' + bigW + '" src="' + src + '" />'
        });
    }
    layui.use(['form', 'layer', 'upload'], function () {
        let $ = layui.jquery;
        let form = layui.form,
            layer = layui.layer,
            upload = layui.upload;

        /*上传图片*/
        upload.render({
            elem: '#preview_img'
            , url: '${path}/movies/uploadFile'
            , size: 1024
            // , auto: false //不自动上传
            , bindAction: '#upload_img' //上传绑定到隐藏按钮
            , choose: function (obj) {
                //预读本地文件
                obj.preview(function (index, file, result) {
                    $('#fileName').val(file.name); //展示文件名
                    $('#colla_img').find('img').remove();
                    $('#colla_img').append('<a href="#" onclick="openImg();"><img id="showImg" src="' + result + '" width="370px"></a>');
                })
            }
            , done: function (res) {
                console.log(res)
                if (res.code == 200){
                    let img_src = res.data.src;
                    console.log(img_src);
                    layer.msg("上传成功！");
                }
                $('#credential_hide').val(res.data.src); //隐藏输入框赋值
                $('#submitForm').click(); //上传成功后单击隐藏的提交按钮
            }
            , error: function (index, upload) {
                layer.msg('上传失败！' + index, {icon: 5});
            }
        });



        //确定按钮点击事件
        $('#fake').click(function () {
            $(this).attr({'disabled': 'disabled'});
            $('#upload_img').click();//单击隐藏的上传按钮
        });

        /*监听提交*/
        form.on('submit(add_recharge_submit)', function (data) {
            addRecharge(data.field);
            return false;
        });
    });
</script>
</body>
</html>